<template>
  <el-submenu :index="index">
    <template slot="title">
      <i :class="[ data.icon ]"></i>
      <span>{{ data.name }}</span>
    </template>

    <template v-for="(item, num) in data.children">

      <!-- 展开菜单
      -------------------------- -->
      <comp-aside-submenu-template :data="item"
        v-if="item.children"
        :key="num"
        :index="`${index}-${num + 1}`"></comp-aside-submenu-template>

      <!-- 未展开菜单
      -------------------------- -->
      <el-menu-item :index="`${index}-${num + 1}`"
        v-else
        @click.native.stop="handleClick(item.route)"
        :key="num">
        <i :class="[ item.icon ]"></i>
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
    </template>
  </el-submenu>
</template>

<script>
export default {
  name: 'CompAsideSubmenuTemp',
  props: {
    data: Object,
    index: String
  },
  methods: {
    handleClick (routeName) {
      this.$router.push({ name: routeName })
    }
  }
}
</script>
